<template>
    <div class="compliance-system-page">
        <FawaBanner
            url="/system/man.png"
            title="Compliance System and Governance Mechanism" />

        <div class="compliance-body">
            <div
                id="daoBox"
                class="com-dao-box">
                <FawaTitle
                    class="dao-title-style"
                    title="Foundation and DAO Dual-Layer Structure"
                    :text="DaoHintText" />

                <div class="dao-card-box">
                    <!-- :sub-title="DaoSubTitle" -->
                    <FawaCard
                        class="card-item"
                        title="Functions of the Foundation"
                        :list="funList" />
                    <!-- :sub-title="AutonomySubTitle" -->
                    <FawaCard
                        class="card-item"
                        title="Autonomy Mechanism of the DAO"
                        :list="daoList" />
                </div>
            </div>

            <div
                id="systemBox"
                class="com-system-box">
                <FawaTitle
                    class="system-title-style"
                    title="International Compliance System"
                    :text="SystemHintText" />
                <div class="sys-core-text">Core Compliance Principles</div>

                <div class="croe-list-box">
                    <FawaList :list="coreList" />
                </div>
            </div>

            <div
                id="regionalBox"
                class="com-regional-box">
                <FawaTitle
                    class="reg-title-style"
                    title="Regional Compliance Layout" />

                <FunctionalPositioning
                    :items="strategicItems"
                    layout="horizontal"
                    :columns="4" />
            </div>

            <div class="com-core-box">
                <div class="sys-core-text">Compliance Mechanisms and Measures</div>

                <div class="croe-list-box">
                    <FawaList :list="prinList" />
                </div>
            </div>

            <!-- <div class="com-core-box">
                <div class="sys-core-text">Strategic Significance</div>

                <div class="croe-list-box">
                    <FawaList :list="significanceList" />
                </div>
            </div> -->
        </div>

        <div id="legalBox">
            <FawaBottomBanner
                url="/system/6.png"
                title="Legal Audit and Intellectual Property Protection"
                :text="BottomBannerText" />
        </div>
        
        <div class="com-legal-list">
            <FawaList :list="legalList" />
        </div>
    </div>
</template>

<script setup>
    import { computed } from 'vue';

    // eslint-disable-next-line no-undef
    useHead({
        title: 'Compliance System - Fawa',
        meta: [
            {
                name: 'description',
                content: 'Compliance System information and management',
            },
        ],
    });

    const DaoHintText = `FAWA's governance model adopts a "foundation + DAO dual - layer architecture", which, while ensuring global compliance and strategic stability, gradually decentralizes power to the community to achieve true decentralized self - governance.`;
    const DaoSubTitle = `The Foundation, as FAWA's "top-level governance core," primarily undertakes three major functions: Compliance, Strategy, and Global Expansion:`;
    const AutonomySubTitle = `DAO (Decentralized Autonomous Organization) is the core form of governance in the FAWA community, representing the collective will of users, creators, developers and node contributors:`;
    const BalanceSubTitle = `FAWA's "dual-layer structure" is not a simple overlay but a dynamic system of "stability from top-down, activation from bottom-up":`;
    const StrategicSubTitle = ``;
    const SystemHintText = `FAWA is well aware that the global development of Web3 cannot be separated from the compliance framework. Without the guarantee of compliance, the growth of the platform will be restricted, and user trust cannot be established. Therefore, FAWA will build a "multi-level + multi-regional" international compliance system to ensure the platform always meets global regulatory requirements while expanding rapidly.`;
    const BottomBannerText = `In the global compliance environment, FAWA always adheres to the core principles of "transparency, compliance, and respect for creation." Legal audit and intellectual property protection are not only the prerequisites for the legal operation of the platform but also the cornerstone for users and investors to build long - term trust.`;

    const strategicItems = ref([
        {
            title: 'Middle East (MENA Hub)',
            image: '/system/img-1.png',
            description: `Establish an operating entity, utilizing GCC region's open virtual asset regulatory framework as FAWA's strategic center for the Middle East and North Africa.`,
        },
        {
            title: 'Singapore (Asian Financial Center)',
            image: '/system/img-2.png',
            description: `Through the foundation and licensed fund companies, carry out capital operation, fund custody, and cross - border compliant investment.`,
        },
        {
            title: 'Europe and North America',
            image: '/system/img-3.png',
            description: `In the strict regulatory environment of securities and data protection, promote FAWA Token and future equity to enter compliant channels, paving the way for listing on the US stock market.`,
        },
        {
            title: 'Emerging Markets in Southeast Asia',
            image: '/system/img-4.png',
            description: `Collaborate with local governments to promote the implementation of female - friendly digital financial products, reducing regulatory and usage barriers.`,
        },
    ]);

    const funList = computed(() => [
        {
            title: 'Compliance Assurance',
            text: `Establishing independent entities in regions such as Dubai and Singapore to ensure the platform's legal compliance worldwide.`,
        },
        {
            title: 'Strategic Planning',
            text: `Responsible for macro development roadmap, including international strategy, capital market layout, US stock listing, etc.`,
        },
        {
            title: 'Resource Coordination',
            text: `Connect with international capital, brands, and partners, introducing external resources for ecological construction.`,
        },
        {
            title: 'Risk Management',
            text: `Assume the functions of risk control and audit in the early stage of governance to ensure the stable operation of the ecosystem.`,
        },
    ]);

    const daoList = computed(() => [
        {
            title: 'Proposal Mechanism',
            text: `Any user holding a certain proportion of FAWA Tokens can put forward proposals regarding community development, fund utilization, or ecological cooperation.`,
        },
        {
            title: 'Voting Governance',
            text: `All Token holders can participate in voting, with weight determined based on holdings and activity level`,
        },
        {
            title: 'Incentive Mechanism',
            text: `Members actively participating in governance and community building will receive Token rewards and honor badges.`,
        },
        {
            title: 'Autonomy Expansion',
            text: `The DAO will gradually cover all aspects of decision-making from project direction and fund allocation to ecological incubation.`,
        },
    ]);

    const balanceList = computed(() => [
        {
            title: 'Early Stage',
            text: `The Foundation is responsible for strategy and compliance; the DAO is responsible for community vitality and partial governance.`,
        },
        {
            title: 'Middle Stage',
            text: `The power of the foundation and the DAO gradually balances, forming a co - governance pattern.`,
        },
        {
            title: 'Mature Stage',
            text: `The Foundation bears more compliance and external resource connectivity; the DAO fully takes over ecological governance and value distribution.`,
        },
    ]);

    const strategicList = computed(() => [
        {
            title: 'Compliance and Decentralization Coexist',
            text: `It can meet the regulatory requirements of various countries while maintaining the openness of Web3.`,
        },
        {
            title: 'Symbiosis of Stability and Vitality',
            text: `The foundation ensures long - term development, and the DAO guarantees the creativity and autonomy of the community.`,
        },
        {
            title: 'Implementation of Female Empowerment',
            text: `Through the DAO governance mechanism, female users can truly gain control over the governance and revenue rights of the ecosystem.`,
        },
    ]);

    const coreList = computed(() => [
        {
            icon: '/system/coin-broken.png',
            title: 'Transparency',
            text: `All fund flows, token issuance, and governance processes must be publicly recorded on-chain, ensuring traceability.`,
        },
        {
            icon: '/system/hexagon.png',
            title: 'Compliance',
            text: `Strictly adhere to the laws and regulations of host countries, including securities regulation, KYC/AML, data privacy protection, etc.`,
        },
        {
            icon: '/system/marker-05.png',
            title: 'User Protection',
            text: `Provide higher standard compliance measures, especially addressing the privacy and security needs of female users.`,
        },
    ]);

    const prinList = computed(() => [
        {
            icon: '/system/icon.png',
            title: 'KYC/AML Review',
            text: `Ensure platform user identity compliance, prevent money laundering and inflow of illegal funds.`,
        },
        {
            icon: '/system/icon-1.png',
            title: 'Data Protection',
            text: `Introduce standards compliant with GDPR (EU General Data Protection Regulation) and other privacy laws to protect sensitive data of female users.`,
        },
        {
            icon: '/system/hexagon.png',
            title: 'Risk Audit',
            text: `Regularly conduct third - party audits of smart contracts and fund pools to reduce vulnerabilities and the risk of attacks.`,
        },
        {
            icon: '/system/card-check.png',
            title: 'Cross - border Payment Compliance',
            text: `Cooperate with compliant payment institutions to ensure the legality of FAWA Token in the global payment system.`,
        },
    ]);

    const significanceList = computed(() => [
        {
            icon: '/system/icon.png',
            title: 'Enhance User Trust',
            text: `Compliance allows female users to use the platform with confidence, lowering the psychological barrier to entering digital finance.`,
        },
        {
            icon: '/system/icon-1.png',
            title: 'Gain Capital Market Recognition',
            text: `Only with an international compliance system can FAWA smoothly enter the US stock market and other capital markets.`,
        },
        {
            icon: '/system/hexagon.png',
            title: 'Promote Inclusive Finance',
            text: `Enable more female groups to safely access the digital economy through compliant channels,truly achieve "inclusive + inclusive" global finance.`,
        },
    ]);

    const legalList = computed(() => [
        {
            title: 'Legal Audit Framework',
            text: `
                <div>Regular Compliance Audits</div>
                <div>Legality Review of Smart Contracts</div>
                <div>Financial Transparency</div>
            `,
        },
        {
            title: 'Intellectual Property Protection System',
            text: `
                <div>Digital Work Rights Confirmation</div>
                <div>Creator Rights Protection</div>
                <div>Brand and Patent Protection</div>
            `,
        },
        {
            title: 'Cross-Border Protection and Cooperation',
            text: `
                <div>Partner with the World Intellectual Property Organization (WIPO) by establishing regional legal teams in key markets. Use on-chain data traceability to empower cross-border rights protection for female creators with verifiable evidence.</div>
            `,
        },
    ]);
</script>

<style lang="scss" scoped>
    // 导入响应式 mixins
    @use '@/styles/mixins/responsive' as *;

    .compliance-system-page {
        .compliance-body {
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 pxToRem(95);
            box-sizing: border-box;
            .dao-title-style {
                max-width: pxToRem(1564);
                margin: 0 auto pxToRem(82);
            }
            .system-title-style {
                max-width: pxToRem(1564);
                margin: 0 auto pxToRem(154);
            }

            .com-dao-box {
                width: 100%;
                padding: pxToRem(126) 0 pxToRem(97);
                box-sizing: border-box;
                .dao-card-box {
                    display: flex;
                    gap: pxToRem(36);
                    &:not(:last-child) {
                        margin-bottom: pxToRem(36);
                    }
                    .card-item {
                        flex: 0 50%;
                        width: 50%;
                    }
                }
            }

            .com-system-box,
            .com-core-box {
                width: 100%;
                padding: pxToRem(126) 0 pxToRem(73);
                .sys-core-text {
                    font-family: 'SFProDisplayBold';
                    font-weight: 600;
                    font-size: pxToRem(50);
                    margin-bottom: pxToRem(82);
                }
                .croe-list-box {
                    max-width: pxToRem(1564);
                    margin: 0 auto;
                }
            }

            .com-regional-box {
                width: 100%;
                padding: pxToRem(100) 0;
                .reg-title-style {
                    margin-bottom: pxToRem(82);
                }
            }

            .com-core-box {
                width: 100%;
                padding: pxToRem(126) 0 pxToRem(30);
                &:last-child {
                    padding-bottom: pxToRem(203);
                }
            }
        }

        .com-legal-list{
            padding: pxToRem(126) pxToRem(60) pxToRem(133);
        }
    }

    // 响应式设计 - 中等屏幕 (1024px及以下)
    @include tablet {
        .compliance-system-page {
            .compliance-body {
                .com-dao-box {
                    .dao-card-box {
                        flex-direction: column;
                        gap: 0;
                        .card-item {
                            flex: 1;
                            width: 100%;
                            &:not(:last-child) {
                                margin-bottom: pxToRem(36);
                            }
                        }
                    }
                }
            }
        }
    }

    // 响应式设计 - 平板端 (768px及以下)
    @include mobile {
        .compliance-system-page {
            .compliance-body {
                padding: 0 pxToRem75(60);
                .dao-title-style {
                    margin-bottom: pxToRem75(82);
                }
                .system-title-style {
                    margin-bottom: pxToRem75(154);
                }

                .com-dao-box {
                    padding: pxToRem75(126) 0 pxToRem75(97);
                    .dao-card-box {
                        gap: pxToRem75(36);
                        &:not(:last-child) {
                            margin-bottom: pxToRem75(36);
                        }
                        .card-item {
                            &:not(:last-child) {
                                margin-bottom: pxToRem75(36);
                            }
                        }
                    }
                }

                .com-system-box,
                .com-core-box {
                    padding: pxToRem75(126) 0 pxToRem75(73);
                    .sys-core-text {
                        font-size: pxToRem75(50);
                        margin-bottom: pxToRem75(82);
                    }
                }

                .com-regional-box {
                    width: 100%;
                    padding: pxToRem75(100) 0;
                    .reg-title-style {
                        margin-bottom: pxToRem75(82);
                    }
                }

                .com-core-box {
                    padding: pxToRem75(80) 0 pxToRem75(150) !important;
                }
            }

            .com-legal-list{
                padding: pxToRem75(126) pxToRem75(60) pxToRem75(133);
            }
        }
    }
</style>
